<script lang="ts" setup>
</script>

<template>
  <div class="w-screen h-screen bg-white font-sans position-relative overflow-x-hidden">
    <router-view v-slot="{ Component, route }">
      <!-- Use a custom transition or fallback to `fade` -->
      <!-- <transition :name="route.meta.transition || 'fade'" mode="out-in"> -->
      <component :is="Component" :key="route.name" />
      <!-- </transition> -->
    </router-view>
  </div>
</template>

<style scoped>
/* .slide-enter-active, */
/* .slide-leave-active { */
/*   transition: all 0.75s ease-out; */
/* } */
/*  */
/* .slide-enter-to { */
/*   position: absolute; */
/*   top: 0; */
/*   right: 0; */
/* } */
/*  */
/* .slide-enter-from { */
/*   position: absolute; */
/*   right: -100%; */
/* } */
/*  */
/* .slide-leave-to { */
/*   position: absolute; */
/*   left: -100%; */
/* } */
/*  */
/* .slide-leave-from { */
/*   position: absolute; */
/*   top: 0; */
/*   left: 0; */
/* } */
/* Transition styles */
/* .slide-left-enter-active, */
/* .slide-left-leave-active { */
/*   position: fixed; */
/*   top: 0; */
/*   left: 0; */
/*   bottom: 0; */
/*   right: 0; */
/*   background: white; */
/*   transition: transform 1s ease; */
/* } */

.slide-left-enter-active {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  transition: transform 1s ease;
}

.slide-left-leave-active {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  transition: transform 1s ease;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(100%);
}
.slide-left-leave-from,
.slide-left-enter-to {
  transform: translateX(0);
}

.slide-right-enter-active {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  transition: transform 10s ease;
}

.slide-right-leave-active {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  transition: transform 10s ease;
}

.slide-right-enter-from {
  transform: translateX(100%);
}

.slide-right-enter-to {
  transform: translateX(0);
}

/* .slide-right-enter-from, */
/* .slide-right-leave-to { */
/*   transform: translateX(-100%); */
/* } */
/* .slide-right-leave-from, */
/* .slide-right-enter-to { */
/*   transform: translateX(0); */
/* } */
</style>
